<template>
	<view class="main">
		<u-navbar title="分享" :placeholder="true" :titleStyle="state.titleStyle" leftIconSize="0" :height="40"
			bgColor="#64EAD2">
		</u-navbar>
		<view class="calendar">
			<view class="title">
				<text>连续签到 获取解锁次数</text><br>
				<text style="font-size: 28rpx;">快去完成任务吧</text>
			</view>
			<view class="date">
				<view class="month">
					<text>{{state.yue}}</text>
					<!-- <view class="icons">
						<u-icon name="arrow-left" color="#333" size="12" @click="setDate(1)"></u-icon>
						<u-icon name="arrow-right" color="#333" size="12" @click="setDate(2)" style="margin-left: 16rpx;"></u-icon>
					</view> -->
				</view>
				<view class="week">
					<view v-for="val,index in state.week" :key="index">
						{{val}}
					</view>
				</view>
				<view class="day">
					<lable v-for="item,index in state.listDate" :key="index">
						<view v-if="item.is_sign==1" style="color: #fff;background-color: #1BDDD0;">{{item.date}}</view>
						<view v-else>
							<view v-if="item.today==1" style="background-color: #EFEFEF;">{{item.date}}</view>
							<view v-else>
								{{item.date}}
							</view>
						</view>
					</lable>
				</view>
				<view class="button" @click="getCreateSign" style="background: linear-gradient(180deg, #FFB815 0%, #FF9C16 100%);">
					<text v-if="state.is_sign=='1'">已签到</text>
					<text v-else>签到</text>
				</view>
				<view class="rule" @click="sheep.$router.go('/pages/index/rule?title=签到规则&config=sign')">
					<image src="../../static/home_qd_icon_gz@2x.png" mode=""></image>
					<text>签到规则</text>
				</view>
			</view>
		</view>
		<view class="ward margin">
			<view class="title">
				兑换解锁次数
			</view>
			<view class="zhu">已注册手机号可兑换1次解锁次数</view>
			<view class="duiHuan"  @click="sheep.$router.go('/pages/user/exchange?dui=1')">去兑换 <image src="../../static/you.png" mode=""></image> </view>
		</view>
		<view class="ward">
			<view class="title">
				任务奖励
			</view>
			<view class="type">
				<block v-for="(val,index) in state.types" :key="index" >
					<view class="one" v-if="index!=1&&state.iswx==true">
						<view class="left">
							<image :src="val.img" mode=""></image>
							<view class="notice">
								<view class="top">
									<view class="tit">
										{{val.tit}}
									</view>
									<view class="num">
										+{{val.num}}
									</view>
								</view>
								<view class="text">
									{{val.rule}}<lable style="color: #1BDDD0;">{{val.num}}</lable>次
								</view>
							</view>
						</view>
						<view class="right" style="background: #1BDDD0;" @click="fx(val.share)">
							{{val.status}}
						</view>
					</view>
					<view class="one" v-if='index!=2&&state.iswx==false'>
						<view class="left">
							<image :src="val.img" mode=""></image>
							<view class="notice">
								<view class="top">
									<view class="tit">
										{{val.tit}}
									</view>
									<view class="num">
										+{{val.num}}
									</view>
								</view>
								<view class="text">
									{{val.rule}}<lable style="color: #1BDDD0;">{{val.num}}</lable>次
								</view>
							</view>
						</view>
						<view class="right" style="background: #1BDDD0;" @click="fx(val.share)">
							{{val.status}}
							<button v-if="index==1" open-type="share"></button>
						</view>
					</view>
				</block>
				
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref,onMounted,reactive} from 'vue';
    import sheep from '@/sheep';
	import {onLoad,onShow,onReady,onShareTimeline,onShareAppMessage} from '@dcloudio/uni-app';
	const state = reactive({
		titleStyle: 'fontWeight:bold;color:white',
		week:['一','二','三','四','五','六','日'],
		is_sign:0,
		yue:'',
		listDate:[],
		date:'',
		fimg:'',
		iswx:true,
		types:[
			{
				img:'../../static/home_qd_icon_qd@2x.png',
				tit:'连续签到',
				num:'1',
				rule:'连续签到5天获取解锁',
				status:'去签到',
				share:'1'
			},
			{
				img:'../../static/home_qd_icon_fx@2x.png',
				tit:'分享好友',
				num:'1',
				rule:'每天分享好友3次获取解锁',
				status:'去分享',
				share:'2'
			},
			{
				img:'../../static/home_qd_icon_fx@2x.png',
				tit:'分享朋友圈',
				num:'1',
				rule:'每天分享好友3次获取解锁',
				status:'去分享',
				share:'3'
			},
			{
				img:'../../static/home_qd_icon_zc@2x.png',
				tit:'分享海报',
				num:'1',
				rule:'分享一个好友注册获取解锁',
				status:'去分享',
				share:'4'
			}
		],
		shareImage:'',
		shareTitle:'',
	})
	onShow(()=>{
		setDate()
		getimage()
		iswx()
		getshareImage()
		getshareTitle()
	})
	onMounted(()=>{
		
	})
	onShareAppMessage(()=>{
		return{
			title:state.shareTitle,
			imageUrl:state.shareImage,
			path: 'pages/index/sign'
		}
	})
	onShareTimeline(()=>{
		return {
			title:state.shareTitle,
			imageUrl:state.shareImage,
			query:'',
			port:''
		}

	})
	function iswx(){
		let port = uni.getSystemInfoSync().uniPlatform
	    console.log(port,'port')
		state.port=port
		if(port=='app'){
			state.iswx=true
		}else if(port=='web'){
			state.iswx=true
		}else{
			state.iswx=false
		}
		// if(port=='devtools'){
		// 	state.iswx=true
		// }
		// if(port=='mp-weixin'){
		// 	state.iswx=true
		// }
	}
	function setDate(type){
		
		let date = new Date()
		let nian = date.getFullYear()
		let yue = date.getMonth()
		let monthNames = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
		let y = yue+1
		let datey = yue-1
	  console.log(y,"月份")
		if(type=='1'){
			let yu = state.date.split('-')[1]
			yu = parseInt(yu)
			if(yu>1){
				yu--
			}
			let datey = yu-1
			state.yue = monthNames[datey]
			yu = yu.toString().padStart(2,'0')
			state.date = nian+'-'+yu
		}else if(type=='2'){
			let yu = state.date.split('-')[1]
			yu = parseInt(yu)
			if(yu<y){
				yu++
			}
			let datey = yu-1
			state.yue = monthNames[datey]
			yu = yu.toString().padStart(2,'0')
			state.date = nian+'-'+yu
		}else{
			y = y.toString().padStart(2,'0')
			state.date = nian+'-'+y
			state.yue = monthNames[datey]
		}
		getDate()
	}
	async function getimage(){
		const {code,data} = await sheep.$api.zqzApi.getimg({
			token:uni.getStorageSync('token')
		})
		if(code=='1'){
			state.fimg = data
		}
	}
	// 分享背景图
	async function getshareImage() {
		const {code,data} = await sheep.$api.test.configSet({
			config:'share_image',
		})
		if (code == 1) {
		   state.shareImage=data
		}
	}
	// 分享标题
	async function getshareTitle() {
		const {code,data} = await sheep.$api.test.configSet({
			config:'share_title',
		})
		if (code == 1) {
		   state.shareTitle=data
		}
	}
	// 分享
	function fx(e){
		if(e==1){
			getCreateSign()
		}else if(e == 2){
			uni.share({
				provider: "weixin",
				scene: "WXSceneSession",
				type:2,
				imageUrl:state.shareImage,
				success: function (res) {
					setjishu()
				},
				fail: function (err) {
					console.log("fail:" + JSON.stringify(err));
				}
			});
		}else if(e == 3){
			uni.share({
				provider: "weixin",
				scene: "WXSceneTimeline",
				type:2,
				imageUrl:state.shareImage,
				success: function (res) {
					setjishu()
				},
				fail: function (err) {
					console.log("fail:" + JSON.stringify(err));
				}
			});
		
		}else{
			uni.navigateTo({
				url:'../share/index'
			})
		}
		
		
		
	}
	async function setjishu(){
		const {code,data} = await sheep.$api.zqzApi.getshared({
			token:uni.getStorageSync('token'),
		})
	}
	async function getDate(){
		const {code,data} = await sheep.$api.zqzApi.getDate({
			month:state.date
		})
		if(code==1){
			state.listDate = data
			let datas = data
			let i = new Date().getDate()-1
			state.is_sign = datas[i].is_sign
			if(datas[i].is_sign==1){
				state.types[0].status='已签到'
			}else{
				state.types[0].status='去签到'
			}
			
		}
	}
	// 签到
	async function getCreateSign() {
		const {code,data} = await sheep.$api.test.createSign({
			token:uni.getStorageSync('token'),
		})
		if (code == 1) {
		    uni.showToast({
		    	title:'签到成功',
		    	icon:'none'
		    })
			getDate()
		}
	}
	function toshare(e){
		if(e==1){
			getCreateSign()
		}else if(e==2){
			fx(2)
		}else if(e==3){
			fx(3)
		}else{
			uni.navigateTo({
				url:'../share/index'
			})
		}
	}

	
</script>

<style lang="scss">
	page {
		height: 100%;
		width: 100%;
		background-color: #f5f5f5;

		.main {
			background: linear-gradient(180deg, #64EAD2 0%, rgba(228, 247, 245, 0) 100%);
			background-size: 100% 1200rpx;
			background-repeat: no-repeat;
			padding: 40rpx 32rpx;
			background-color: #f5f5f5;
			.calendar {
				background: #FFFFFF;
				border-radius: 24rpx;
				border: 2rpx solid #F9AD0D;
				padding: 32rpx 0rpx 0;
				.title{
					padding:0 32rpx 32rpx;
					// padding-bottom: 32rpx;
					border-bottom: 2rpx solid #EDEDED;
					text{
						font-size: 36rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #333333;
						margin: 0 24rpx;
					}
				}

				.date {
					padding: 32rpx 24rpx;
					.title {
						color: $u-primary;
						text-align: center;
						padding: 20rpx 0 0 0;
					}
					.month{
						display: flex;
						align-items: center;
						margin-bottom: 40rpx;
						justify-content: space-between;
						text{
							font-size: 32rpx;
							font-weight: 500;
							color: #333333;
						}
						.icons{
							display: flex;
							align-items: center;
						}
					}
					.week{
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 30rpx;
						font-family: Inter-Regular, Inter;
						font-weight: 400;
						color: #333333;
						margin-bottom: 44rpx;
						margin-right: 14rpx;
						view{
							width: 14%;
							text-align: center;
						}
					}
					.day{
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						lable{
							width: 14%;
							box-sizing: border-box;
							view{
								margin: 0 auto 34rpx;
								width: 68rpx;
								height:68rpx;
								line-height: 68rpx;
								box-sizing: border-box;
								text-align: center;
								border-radius: 50%;
							}
						}
					}
					.button{
						width:400rpx;
						height: 92rpx;
						margin:0 auto 32rpx;
						line-height: 92rpx;
						text-align: center;
						margin-top: 22rpx;
						font-size: 32rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
						border-radius: 27px 27px 27px 27px;
					}
					.rule{
						display: flex;
						align-items: center;
						margin: auto;
						width: 20.6%;
						image{
							height: 32rpx;
							width: 32rpx;
						}
						text{
							font-size: 24rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #999999;
						}
					}
				}
			}
			.ward{
				background-color: #fff;
				margin:32rpx 0 100rpx;
				border-radius: 24rpx;
				padding: 32rpx 24rpx;
				.zhu{
					margin-top: 10rpx;
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #666666;
				}
				.one{
					display: flex;
					align-items: center;
					margin-top: 48rpx;
					justify-content: space-between;
					.left{
						display: flex;
						align-items: center;
						image{
							height: 72rpx;
							width: 72rpx;
						}
						.top{
							display: flex;
							align-items: center;
							.tit{
								font-size: 28rpx;
								font-family: PingFang SC-Bold, PingFang SC;
								font-weight: bold;
								color: #333333;
							}
							.num{
								background: url(../../static/home_qd_icon_js@2x.png);
								background-repeat: no-repeat;
								background-size:100%;
								width: 74rpx;
								height: 32rpx;
								font-size: 24rpx;
								font-family: PingFang SC-Bold, PingFang SC;
								font-weight: bold;
								color: #FFFFFF;
								padding-left: 32rpx;
								box-sizing: border-box;
							}
						}
						.text{
							font-size: 24rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #999999;
						}
					}
					.right{
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						border-radius:30rpx;
						padding: 8rpx 24rpx;
						position: relative;
						button{
							position: absolute;
							width: 140rpx;
							height: 140rpx;
							opacity: 0;
							left: 0;
							top: 0;
							z-index: 9999;
						}
						
					}
				}
			}
			.margin{
				margin:24rpx 0;
				position: relative;
				.duiHuan{
					position: absolute;
					right:24rpx;
					top:24rpx;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #1BDDD0;
					image{
						width: 32rpx;
						height:32rpx;
					}
				}
			}
		}
	}
</style>